<template>
  <a-spin tip="Loading..." :spinning="spinning">
    <div class="operation-box">
      <a-form :form="form" @submit="handleSubmit">
        <a-form-item label="小区" v-bind="col">
          <a-select placeholder="请选择小区" v-decorator="['bd_info_id',{rules:[{required:true,message:'请选择小区'}]}]">
            <a-select-option v-for="(item,index) in communityList" :key="index" :value="item.value">{{item.label}}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="车位号" v-bind="col">
          <a-input placeholder="请输入车位号" v-decorator="['name',{rules:[{required:true,message:'车位号不可为空'}],initialValue:''}]"/>
        </a-form-item>
        <a-form-item label="车位面积" v-bind="col">
          <a-input placeholder="请输入车位面积" addonAfter="平方米" v-decorator="['area',{rules:[{required:true,message:'车位面积不可为空'}],initialValue:''}]" />
        </a-form-item>
        <a-form-item label="车位类型" v-bind="col">
          <a-select placeholder="请车位类型" v-decorator="['type',{rules:[{required:true,message:'请选择车位类型'}]}]">
            <a-select-option v-for="(item,index) in carTypeList" :key="index" :value="item.id">{{item.name}}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="车位状态" v-bind="col">
          <a-select placeholder="请车位状态" v-decorator="['status',{rules:[{required:true,message:'请选择车位状态'}]}]">
            <a-select-option v-for="(item,index) in carStatusList" :key="index" :value="item.id">{{item.name}}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="备注" v-bind="col">
          <a-input placeholder="请输入备注" v-decorator="['remarks']"/>
        </a-form-item>
        <a-form-item :wrapperCol="{xs:{span:24,offset:0},sm:{span:24,offset:8}}">
          <a-button type="primary" html-type="submit">保存</a-button>
          <a-button style="margin-left: 16px;" @click="() => { $router.go(-1) }">返回</a-button>
        </a-form-item>
      </a-form>
    </div>
  </a-spin>
</template>

<script>
  import { ACCESS_TOKEN } from '@/store/mutation-types'
  export default {
    name: 'data_parking_operation',
    data() {
      return {
        token:this.$ls.get(ACCESS_TOKEN), // 用户token
        baseURL:this.axios.defaults.baseURL,
        communityList:[], // 小区列表
        carTypeList:[{id:1,name:'人防车位'},{id:2,name:'公共车位'},{id:3,name:'产权车位'}],
        carStatusList:[{id:1,name:'已售'},{id:2,name:'已租'},{id:3,name:'空置'},{id:4,name:'自用'},{id:5,name:'待售'},{id:6,name:'待租'},{id:7,name:'临停'}],
        spinning:false,
        form:this.$form.createForm(this),
        col:{
          labelCol:{xs:{span:24},sm:{span:8}},
          wrapperCol:{xs:{span:24},sm:{span:10}}
        },
        id:'', // 车位id
      }
    },
    async mounted() {
      let { id } = this.$route.params;
      this.id = id === 'add' ? 0 : id;
      if(!isNaN(this.id)){
        await this.getAllCommunityList();
        if(this.id !== 0) {
          let { bd_info_id,name,area,type,status,remarks } = await this.getInfo(id);
          this.form.setFieldsValue({ bd_info_id,name,area,type,status,remarks });
        }
      }else this.$router.go(-1);
    },
    methods:{
      // 获取车位设置信息
      getInfo(id) {
        this.spinning = true;
        return new Promise((resolve,reject) => {
          this.axios({
            method:'post',
            url:'/parking/getInfo',
            data:{id,token:this.token}
          }).then(res => {
            let { code,msg,data:{data} } = res;
            if(code === 0){
              resolve(data);
            }else this.$message.warning(msg);
          }).catch(err => {
            this.$message.error('服务器发生错误...');
          }).finally(() => {
            this.spinning = false;
          })
        })
      },
      // 提交信息
      handleSubmit(e) {
        e.preventDefault();
        this.form.validateFields((err, values) => {
          if (err) {
            for(let key in err){
              for(let item of err[key]['errors']) return this.$message.warning(item['message'],2);
            }
          }
          Object.assign(values,{token:this.token,id:this.id});
          this.spinning = true;
          this.axios({
            method:'post',
            url:'/parking/operation',
            data:values,
          }).then(res => {
            if(res.code == 0){
              this.$message.success('保存成功',1);
              this.$router.push({name:'data_parking_index'});
            }else this.$message.warning(res.msg);
          }).catch(() => {
            this.$message.error('服务器发生错误...',2)
          }).finally(() => { this.spinning = false; });
        });
      },
      // 获取小区列表
      getAllCommunityList() {
        this.spinning = true;
        return new Promise((resolve, reject) => {
          this.axios({
            method:'post',
            url:'/parking/getAllCommunityList',
            data:{token:this.token}
          }).then(res => {
            if(res.code === 0){
              this.communityList = res.data;
              resolve();
            }else this.$message.warning(res.msg);
          }).catch(err => {
            this.$message.error('服务器发生错误...');
          }).finally(() => {
            this.spinning = false;
          })
        });
      }
    }
  }
</script>

<style>

</style>
<style lang="less" scoped>
  .operation-box{
    background: #ffffff;
    padding:25px;
    box-sizing: border-box;
    .ant-upload-select-picture-card i {
      font-size: 32px;
      color: #999;
    }
    .ant-upload-select-picture-card .ant-upload-text {
      margin-top: 8px;
      color: #666;
    }
  }
</style>